<!DOCTYPE html>
<html lang="en">
	<head>
		<title>地图导航</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<style rel="stylesheet" type="text/css">
			/*去除正文区域的间距*/
			body {
				margin: 0 auto;
				padding: 0
			}

			/*地图加载区域样式*/
			#container {
				width: 100%;
				height: 100vh;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<!-- 地图容器 -->
		<div id="container"></div>

		<!--设置全局脚本变量：地图使用的密钥-->
		<script type="text/javascript">
			//原型链：在当前web打开网页的窗口对象window中，添加变量
			window._AMapSecurityConfig = {
				//【安全密钥】
				securityJsCode = "23464d86ca4748b11843239ad7c99b83"
			}
		</script>

		<!--获取整个地图的脚本:
        直接访问官网下载到本地的，下载时，提供key
		-->
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=55e559d39793866c116fdc4a6b214b75">
		</script>

		<!--初始化地图-->
		<script type="text/javascript">
			//初始化地图，遇到new就会创建实例，页面中就会按照上面下载的脚本
			//进行处理，绘制地图
			//这里采用的都是var：因为后续还有方法需要使用到这些对象
			//因此，用var，进行变量提升，默认通过原型链，挂载到当前位置的最顶层
			//按照现在的情况，最顶层对象就是：window

			//地图初始化后，缩放比例
			var zoom = 18

			//创建地图对象，设置默认的定位经纬度
			var map = new AMap.Map(
				"container", //显示容器的id值：上面的那个div
				{
					zoom: zoom, //默认的初始化显示比例
					//center: [121.47592, 31.237687]  //中心点-上海学校总部
					center: [116.397658, 39.908028] //中心点-北京天安门
				}
			);



			//当页面加载完毕时
			window.onload = function() {
				//调用鸿蒙端Proxy代理过来的指定方法
				window.swift.setCurrentLocation()
			};


			//【定位方法】：
			// 方法负责进行具体内容的设置与操作，由-鸿蒙应用负责调用
			function setLocation(lng, lat) {
				//第一步：设置地图的中心点
				map.setZoomAndCenter(zoom, [lng, lat]);

				//第二步：设置中心点的Marker标记
				var marker = new AMap.Marker({
					map: map, //基于那个地图对象
					icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
					position: [lng, lat] //经纬度
				});
				//添加到地图中
				map.add(marker);

				//第三步：为地图添加插件功能
				//自动搜索且标记出周围的核心地标
				map.plugin(['AMap.PlaceSearch'], function() {
					//搜索参数配置对象
					var PlaceSearchOptions = {
						map: map, //地图位置
						pageSize: 4, //搜索出的结果，默认10个
						pageIndex: 1, //显示第几页
						extensions: 'base' //返回的详情-只要基本信息
					};

					//创建插件-搜索功能类-功能实例
					var MSearch = new AMap.PlaceSearch(PlaceSearchOptions);

					//设置监听：(具体对象操作，'完成状态'，回调)-没有执行
					AMap.Event.AddListener(MSearch, 'complete', (res) => {
						//将搜索到的结果，通过事件调用
						//作为参数，传递到鸿蒙应用中
						window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois))
					});

					//正式执行搜索，在指定的坐标周围
					MSearch.searchNearBy('停车场', [lng, lat]);
				});
			}
		</script>
	</body>
</html>